<template>
  <div class="promoDetail">
    <el-form label-width="160px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="开团时间:">{{promo.startTimestamp | formatDate}}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="结束时间:">{{promo.endTimestamp | formatDate}}</el-form-item>
        </el-col>
      </el-row>

       <el-row>
        <el-col :span="10">
          <el-form-item label="公告:">{{promo.notice}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="前端是否展示:">{{promo.isShow == 0 ? '隐藏': '显示'}}</el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="商品种类:">{{promo.categoryNumber}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="团长人数:">{{promo.managerNumber}}</el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="收入金额:">{{promo.incomeAmount}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="状态:">{{promo.status | formatStatus}}</el-form-item>
        </el-col>
         <el-col :span="10">
          <el-form-item label="创建时间:">{{promo.createtime | formatDate}}</el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="20">
          <el-form-item>
            <el-button type="primary" @click="pushMessage()" v-if="promo.pushStatus == 0 && promo.status != 2" :disabled="canPush">推送消息</el-button>
            <el-button type="primary" @click="goBack()">返 回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="split"></div>

    <div class="manager-list">
      <span>开团团长</span>
    </div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="rewardMoney" label="已获佣金" align="center"></el-table-column>
      <el-table-column prop="frozenMoney" label="冻结佣金" align="center"></el-table-column>
      <el-table-column prop="nobalanceMoney" label="未结算佣金" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" align="center" :formatter="statusFormat"></el-table-column>
    </el-table>

     <div class="split"></div>
    <div class="manager-list">
      <span>开团商品</span>
    </div>

    <el-table :data="productList" stripe style="width: 100%">
      <el-table-column label="顺序" align="center" width="200">
        <template slot-scope="scope">
          <div class="sequence" @click="handleSelect(scope.$index, scope.row)" v-show="scope.row.selected == false"><span class="num">{{scope.row.sequence}}</span><i class="el-icon-edit"></i></div>
          <div class="sequence-edit" v-show="scope.row.selected == true">  
            <el-input
              size="mini"
              placeholder="顺序值" v-model="scope.row.sequence">
            </el-input>
            <i class="el-icon-error" @click="_getDetail()"></i>
            <i class="el-icon-success" @click="updateSequence(scope.row)"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="originPrice" label="原价" align="center"></el-table-column>
      <el-table-column prop="presentPrice" label="现价" align="center"></el-table-column>
    </el-table>
 
  </div>
</template>

<script>
import api from "@/api/promo";
import { formatDate } from "@/utils/date";

const SUCCESS = 0;
export default {
  data() {
    return {
      id: null,
      promo: {},
      tableData: [],
      productList: [],
      canPush: false
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this._getDetail();
    } else {
      this.$message({
        type: "warning",
        message: "获取参数失败,请返回列表页重试!"
      });
    }
  },
  filters: {
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    formatStatus(status) {
      if (status == 0) {
        return "未开始";
      }

      if (status == 1) {
        return "进行中";
      }

      if (status == 2) {
        return "已结束";
      }
    }
  },
  methods: {
    updateSequence(row) {
      let sequence = row.sequence.trim();
      const numberRegular = /^[1-9]\d*|0$/;
      if (!numberRegular.test(sequence)) {
        this.$message({
          type: "warning",
          message: "顺序值非法,请重新填写"
        });
        return;
      }

      let sequenceParams = {
        id: row.id,
        sequence: sequence
      };

      api.updateSequence(sequenceParams).then(response => {
        if (response.code == SUCCESS) {
          this._getDetail();
          this.$message({
            type: "success",
            message: "设置成功"
          });
        }
      });
    },
    handleSelect(index, row) {
      this.productList.forEach(item => {
        item.selected = false;
      });

      this.productList.forEach(item => {
        if (row.id == item.id) {
          item.selected = true;
        }
      });
    },
    statusFormat(row, column) {
      let status = row[column.property];
      if (status == 0) {
        return "正常";
      } else {
        return "冻结";
      }
    },
    _getDetail() {
      api.getDetail(this.id).then(response => {
        if (response.code == SUCCESS) {
          this.promo = response.data.promo;

          this.tableData = response.data.managerList;
          this.productList = response.data.productList;

          this.productList.forEach(item => {
            this.$set(item, "selected", false);
          });
        }
      });
    },
    goBack() {
      this.$router.back();
    },
    pushMessage() {
      this.canPush = true;
      api.pushMessage(this.id).then(response => {
        if (response.code == SUCCESS) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
        } else {
          this.$message.error(response.message);
        }
      });
    }
  }
};
</script>

<style lang="less">
.promoDetail {
  padding-bottom: 100px;

  .split {
    border-top: 1px dashed #999;
    margin: 20px 0;
  }

  .manager-list {
    margin: 20px 0;
    padding-left: 50px;
    span {
      font-weight: bold;
      color: #999;
      vertical-align: middle;
    }
  }

  .el-button {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  .sequence {
    cursor: pointer;

    .num {
      margin-right: 10px;
    }

    input {
      width: 100px;
      font-size: 14px;
      text-align: center;
    }
  }

  .sequence-edit {
    display: flex;
    align-items: center;

    input {
      width: 80px;
      font-size: 14px;
      text-align: center;
    }

    i {
      font-size: 18px;
      margin-left: 10px;
      cursor: pointer;
    }

    .el-icon-success {
      color: #53e3a6;
    }

    .el-icon-error {
      color: #f56c6c;
    }
  }
}
</style>